    <!-- 设备树 -->  
    <template>
  <div class="content">
    <!-- 搜索框 -->
    <div class="search" style="width:1445px;height:100px;padding-left:50px;">
        <a-col :xl="6" :lg="7" :md="18" :sm="24" style="margin-right:10px;">
            <a-form-item label="风场名称">
              <j-select-depart placeholder="请选择风场名称"  id="orgname" v-on:orgname="getorgname" @change="change()"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" style="margin-right:10px;">
            <a-form-item label="风机名称">
              <j-search-select-tag id="fanid" v-on:fanid="getfanid" type="list"  :trigger-change="true" dictCode="" placeholder="请选择风机id" setFieldsValue="selectValue" :dictOptions="dictOption"/>
            </a-form-item>
          </a-col>
          <a-button type="primary"  icon="search" style="margin-top:42px;" @click="search()">查询</a-button>
    </div>
    <div style="display:flex;justify-content:space-between;width:1445px;background-color:#fff;">

      <div id="myChart" :style="{width: '1300px', height: '1200px'}"></div>
    </div>
    

    <div id="rightMenu" class="menu" style="display: none;">
      <ul class="select">
        <li class="add">增加</li>
        <li class="dele">删除</li>
        <li class="change">修改</li>
      </ul>
    </div>

<!-- 更改框 -->
    <div class="ant-modal-content" style="width：200px;">
      <button type="button" aria-label="Close" class="ant-modal-close">
        <span class="ant-modal-close-x">
          <i aria-label="图标: close" class="anticon anticon-close ant-modal-close-icon">
            <svg
              viewBox="64 64 896 896"
              data-icon="close"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              focusable="false"
              class
            >
              <path
                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
              ></path>
            </svg>
          </i>
        </span>
      </button>
      <div class="ant-modal-header">
        <div id="rcDialogTitle4" class="ant-modal-title">风机设备</div>
      </div>
      <div class="ant-modal-body">
       <a-input placeholder="设备名称" id="product_name" style="margin-bottom:20px;" /> <br/>
      <a-input placeholder="设备类型" id="type"/> <br/><br/>

        <div class="clearfix">
          <a-upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" id="img"/>
          </a-modal>
      </div>

      </div>
      <div class="ant-modal-footer">
        <div>
          <button type="button" class="ant-btn">
            <span>取 消</span>
          </button>
          <button type="button" class="ant-btn ant-btn-primary comfirm">
            <span>确 认</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

    <script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/tree')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate.vue'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import Inout from '@/components/form/Inout'
import { httpAction, getAction,postAction } from '@/api/manage'
import {getCookie,setCookie} from '@/utils/cookie'
import store from '@/store'



function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  name: 'hello',
   mixins:[JeecgListMixin, mixinDevice],
   components: {
      JDate,
      JSelectDepart,
      JSearchSelectTag
    },
  data() {
    return {
      dataSource:[],
      fanid:'',
      idstr:'',
      selectValue:'',
      dictOption:[],
      previewVisible: false,
      previewImage: '',
      fileList: [],
      treedata: {},
      data2: {},
      params: {},
      visible: false,
      flage:false,
      
    }
  },
  mounted() {
    var params = {
      productId: this.$route.params.record.id,
      route: window._CONFIG['staticDomainURL']
    }

    getAction('/dtequipmenttree/dtEquipmentTree/list', params).then(res => {
      console.log('res', res)
      this.treedata = res.result
      this.drawLine()
    })
     
  },
  methods: {
    change(){
      this.dictOption = [];
      console.log('gaibian')
      if(this.idstr == ''){
        this.idstr = store.getters.userInfo.departIds
      }
       var param = {
      orgName:this.idstr
      }
      this.flage = true
      if(this.flage == true){
         getAction('/product_manage/dtPCode/queryFanDetail',param).then(res=>{
              console.log('222',res)
              for(var i=0; i<res.result.records.length;i++){
              this.dictOption.push({
                text:res.result.records[i].fanName,
                value:res.result.records[i].id,
              })
            }
          })
      }
    },
    getfanid(selectedValue){
       this.fanid = selectedValue
    },
    getorgname(idstr){
      this.idstr = idstr
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    search(){
      if(this.idstr == ''){
        this.idstr = store.getters.userInfo.departIds
      }
      console.log('查找11',this.idstr)
      console.log('查找22',this.fanid)
      var params = {}
      params.productId = this.fanid
      getAction('/dtequipmenttree/dtEquipmentTree/list',params).then(res=>{
          console.log('res11',res.result)
          this.treedata = res.result
          this.drawLine()
        })
     

    },
    
    drawLine() {
      var param = {}
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      var option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          enterable: true, //鼠标是否可进入提示框浮层中
          // formatter: formatterHover //修改鼠标悬停显示的内容
        },
        legend: {
          top: '2%',
          left: '3%',
          orient: 'vertical',
          data: [
            {
              name: 'tree1',
              icon: 'rectangle'
            }
          ],
          borderColor: '#c23531'
        },
        series: [
          {
            type: 'tree',

            name: 'tree1',

            data: this.treedata,

            top: '5%',
            left: '7%',
            bottom: '2%',
            right: '30%',

            symbolSize: 7,

            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            // symbol:'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg', //修改图片
            symbolSize: [15, 15], //修改图片大小

            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },

            expandAndCollapse: true,

            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      myChart.setOption(option)
     

      myChart.on('contextmenu', 'series', params => {
        // console.log('params',params)
        param = params
        params.event.event.preventDefault()
        this.selectedIndex = params.dataIndex
        var rightMenu = document.querySelector('#rightMenu')
        rightMenu.style.display = 'block'
        rightMenu.style.left = params.event.event.pageX + 'px'
        rightMenu.style.top = params.event.event.pageY + 'px'
      })

      document.querySelector('.content').onclick = function() {
        var rightMenu = document.querySelector('#rightMenu')
        rightMenu.style.display = 'none'
      }

      //添加
      document.querySelector('.add').onclick = function() {
        console.log('添加', param.data)
        //如果没有子节点的话就设置子节点为空
        if (param.data.children == null) {
          param.data.children = []
        }
        console.log(param.seriesIndex)
        console.log(param.type)
        if (typeof param.seriesIndex == 'undefined') {
          return
        }
        if (param.type == 'contextmenu') {
          param.data.children.push({ name: '子部门测试', children: [] })
          param.data.hasChild = false
          param.data.collapsed = false
          console.log(param.data)
          console.log(myChart.getOption().series[0].data)
          this.treedata = myChart.getOption().series[0].data
          myChart.clear()
          var option = {
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove',
              enterable: true, //鼠标是否可进入提示框浮层中
              // formatter: formatterHover //修改鼠标悬停显示的内容
            },
            legend: {
              top: '2%',
              left: '3%',
              orient: 'vertical',
              data: [
                {
                  name: 'tree1',
                  icon: 'rectangle'
                }
              ],
              borderColor: '#c23531'
            },
            series: [
              {
                type: 'tree',

                name: 'tree1',

                data: this.treedata,
                //    data: [this.data2],

                top: '5%',
                left: '7%',
                bottom: '2%',
                right: '30%',

                symbolSize: 7,

                label: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right'
                },
                // symbol:'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg', //修改图片
                symbolSize: [30, 30], //修改图片大小

                leaves: {
                  label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                  }
                },

                expandAndCollapse: true,

                animationDuration: 550,
                animationDurationUpdate: 750
              }
            ]
          }
          myChart.setOption(option)
        }
      }
      //删除
      document.querySelector('.dele').onclick = function() {
        console.log('删除', param.data)
      }
      //修改
      document.querySelector('.change').onclick = function() {
        console.log('修改', param.data)
         var modal = document.querySelector('.ant-modal-content')
            modal.style.display = 'block'
            modal.style.left = '700px'
            modal.style.top = '500px'
            document.querySelector('#product_name').value = param.data.name
            this.previewImage = param.data.symbol
            document.querySelector('.comfirm').onclick = function(){
                console.log('设备名称', document.querySelector('#product_name').value)
                console.log('设备类型',document.querySelector('#type').value)
              console.log('图片',previewImage)
                document.querySelector('.ant-modal-content').style.display = 'none'
            }
      }
      //关闭对话框
      document.querySelector('.ant-modal-close').onclick = function(){
        document.querySelector('.ant-modal-content').style.display = 'none'
      }
      document.querySelector('.ant-btn').onclick = function(){
        document.querySelector('.ant-modal-content').style.display = 'none'
      }
      //悬浮数据
      // function formatterHover(params) {
      //    console.log(params);
      //    var param = {
      //        belongId:params.data.id
      //    }
      //    var data = []
      //     getAction('/dtequipmenttree/dtEquipmentTree/getPartList',param).then(res=>{
      //    data = res.result.records
      //    console.log('111',data)
      //   })
       
      //   // var imgPath = params.data.imageUrl
      //   //图片地址截取，因为echarts修改图片的时候有一个------image://---前缀，前缀后面的才是图片真正的地址
      //   // var imgPathSrc = params.data.imageUrl
      //   // console.log('str',imgPathSrc);
     
      //     return (
      //       // "<img src='" +
      //       // imgPathSrc +
      //       // " ' width='30px' height='30px'>" +
      //       '<span style="position: relative;top: 5px;padding: 0 5px;">物料名称：' +
      //       data.pname +
      //       '</span>' +
      //       '<br>' +
      //       '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">设备型号：' +
      //       data.ptype+
      //       '</span>' +
      //       '<br>' +
      //       '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">出库时间：' +
      //       data.time +
      //       '</span>'
      //     )
      //   }
      }
    
  }
}
</script>
    <style scoped>
    .search{
      margin-bottom:20px; 
      background-color: #fff;
    }
  .content{
    background-color: #F0F2F5;
    
  }
#show {
  width: 200px;
  height: 500px;
  float: right;
  margin-top: 300px;
}
.menu {
  position: absolute;
  background: rgba(3, 3, 3, 0.6);
  border-radius: 5px;
}
.menu ul {
  list-style: none;
  width: 70px;
}
.menu ul li {
  margin-left: -40px;
  padding: 7px 0px 0px 20px;
  color: #ffff;
  border-bottom: 1px dashed #ffffff;
  font-size: 14px;
}
.menu ul li:hover {
  background-color: rgba(250, 248, 248, 0.822);
  color: #000;
}
.menu ul li:last-child {
  border-bottom: none;
}
.ant-modal-content {
    z-index: 99;
    width: 520px;
    display: none;
    position: absolute;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    pointer-events: auto;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.ant-table {
    height: 400px !important;
  }
</style>

